<script>
import AmountInput from '@/components/amountInput'

export const FormStruct = {
    companyName:'',
    beginDate:null,
    endDate:null,
    department:null,
    post:null,
    reasonForLeaving:'',
    companyPhone:'',
    salary:null,
    scopeOfWork:''
}

export default {
    components:{
        AmountInput
    },
    props:{
        labelPosition:{
            default:'top'
        },
        layout:{
            default:'horizontal' // horizontal(横向) / vertical (垂直)
        },
        value:{
            type:Object,
            required:true,
            default(){
                return null
            }
        }
    },
    data() {
        return {
            validate:null,// Form 的校验函数
            resetFields:null,//重置函数
            // form:{
            //     companyName:'',
            //     beginDate:null,
            //     endDate:null,
            //     department:null,
            //     post:null,
            //     reasonForLeaving:'',
            //     companyPhone:'',
            //     salary:null,
            //     scopeOfWork:''
            // },
            formRules:{
                companyName:[
                    { required: true, message: '请填写公司名称', trigger: ['change','blur'] }
                ],
                beginDate:[
                    { 
                        validator: (rule, value, callback) => {
                            if(!(value instanceof Date))
                                return callback(new Error('请选择起始日期'))
                            
                            if(
                                this.form.endDate instanceof Date && 
                                value.getTime() >= this.form.endDate.getTime()
                            )
                                return callback(new Error('起始日期不能大于结束日期'))

                            // this.$refs.form?.validateField?.('beginDate')
                            callback()
                        }, 
                        required:true,
                        trigger: ['change','blur'] 
                    }
                ],
                endDate:[
                    { 
                        validator: (rule, value, callback) => {
                            if(!(value instanceof Date))
                                return callback(new Error('请选择结束日期'))

                            if(
                                this.form.beginDate instanceof Date &&
                                value.getTime() <= this.form.beginDate.getTime()
                            )
                                return callback(new Error('结束日期不能小于开始日期'))

                            // this.$refs.form?.validateField?.('beginDate')

                            callback()
                        }, 
                        required:true,
                        trigger: ['change','blur'] 
                    }
                ],
                department:[
                    { required: true, message: '请填写所在部门', trigger: ['change','blur'] }
                ],
                post:[
                    { required: true, message: '请填写所在岗位', trigger: ['change','blur'] }
                ],
                reasonForLeaving:[
                    { required: true, message: '请填写离职原因', trigger: ['change','blur'] }
                ],
                companyPhone:[
                    { required: true, message: '请填写公司电话', trigger: ['change','blur'] }
                ],
                salary:[
                    { 
                        validator: (rule, value, callback) => {
                            if(typeof value !== 'number')
                                return callback(new Error('请填写薪水'))

                            if(value < 0)
                                return callback(new Error('薪水不能小于0'))

                            callback()
                        }, 
                        required:true,
                        trigger: ['change','blur'] 
                    }
                ],
                scopeOfWork:[
                    { required: true, message: '请填写工作内容', trigger: ['change','blur'] }
                ]
            }
        }
    },
    computed:{
        form:{
            get(){
                return this.value
            },
            set(form){
                this.$emit('input',{ ...form })
            }
        },
        attrs(){
            const attrs = { ...this.$attrs }

            attrs['model'] = this.form
            attrs['rules'] = this.formRules

            const unnecessaryAttrs = [
                'layout'
            ]

            for(let attr of unnecessaryAttrs)
                delete attrs[attr]

            return attrs
        },
        colSpan(){
            return this.layout === 'horizontal' ? 12 : 24
        }
    },
    // watch:{
    //     form:{
    //         handler(v){
    //             console.log('chagne...')
    //         },
    //         deep:true
    //     }
    // },
    methods:{
        handleFormChange(){
            this.$emit('input',this.form)
        }
    },
    mounted(){
        this.validate = this.$refs.form?.validate
        this.resetFields = this.$refs.form?.resetFields
        // console.log(this.form)
        // KRIS DEBUGGER
        // window.abcd = this.resetFields
    }
}
</script>

<template>
    <div class="work-experience-form-container">
        <el-form 
            ref="form" 
            v-bind="attrs"
        >

            <el-row :gutter="36">
                <el-col :span="colSpan">
                    <el-form-item label="公司名称" prop="companyName">
                        <el-input 
                            v-model="form.companyName" 
                            placeholder="请填写公司名称"
                        />
                    </el-form-item>

                    <el-form-item label="公司电话" prop="companyPhone">
                        <el-input 
                            v-model="form.companyPhone" 
                            placeholder="请填写公司电话"
                        />
                    </el-form-item>

                    <el-form-item label="起始日期" prop="beginDate">
                        <el-date-picker
                            v-model="form.beginDate" 
                            type="date"
                            style="width: 100%;"
                            placeholder="请选择起始日期"
                        />
                    </el-form-item>

                    <el-form-item label="结束日期" prop="endDate">
                        <el-date-picker
                            type="date"
                            style="width: 100%;"
                            v-model="form.endDate" 
                            placeholder="请选择结束日期"
                        />
                    </el-form-item>

                    <el-form-item label="所在部门" prop="department">
                        <el-input 
                            v-model="form.department" 
                            placeholder="请填写所在部门"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="colSpan">
                    

                    <el-form-item label="工作岗位" prop="post">
                        <el-input 
                            v-model="form.post" 
                            placeholder="请填写工作岗位"
                        />
                    </el-form-item>

                    <el-form-item label="薪水" prop="salary">
                        <AmountInput
                            v-model="form.salary" 
                            placeholder="请填写薪水"
                        />
                    </el-form-item>

                    <el-form-item label="离职原因" prop="reasonForLeaving">
                        <el-input 
                            type="textarea" 
                            :rows="4" 
                            v-model="form.reasonForLeaving" 
                            placeholder="请填写离职原因"
                        />
                    </el-form-item>

                    <el-form-item label="工作内容" prop="scopeOfWork">
                        <el-input 
                            type="textarea" 
                            :rows="4" 
                            v-model="form.scopeOfWork" 
                            placeholder="请填写工作内容"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </div>
</template>

<style lang="scss"></style>